import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../../../../lib_baseview/lib_baseview.dart';
import '../../../../lib_baseview/theme/jr.dart';
import '../../../../lib_baseview/utils/constant/text_styles.dart';
import '../../../../lib_baseview/utils/screen_utils.dart';
import '../../../../lib_baseview/widget/textfield/jr_edit_text.dart';
import '../../../../resource/language/generated/l10n.dart';

class MenuPlayDetailPage extends StatefulWidget {
  final String id;
  const MenuPlayDetailPage({Key? key, required this.id}) : super(key: key);

  @override
  State<MenuPlayDetailPage> createState() => _MenuPlayDetailPageState();

  static Future show(BuildContext context, String id) async {
    return showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      backgroundColor: Colors.transparent,
      builder: (context) => MenuPlayDetailPage(
        id: id,
      ),
    );
  }
}

class _MenuPlayDetailPageState extends State<MenuPlayDetailPage> {
  // BaseRspResult<RoomInteractionDetailRsp>? _rsp;

  @override
  void initState() {
    super.initState();
    _requestData();
  }

  _requestData() async {
    // _rsp = await RtcApi.instance.getRoomInteractionDetail(widget.id);
    // setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 680.w,
      clipBehavior: Clip.antiAlias,
      decoration: const BoxDecoration(
          borderRadius: BorderRadiusDirectional.only(
              topStart: Radius.circular(16), topEnd: Radius.circular(16)),
          color: Colors.white),
      // padding: EdgeInsetsDirectional.only(
      //     bottom: 12 + ScreenUtils.ins.iphoneXBottom),
      padding: const EdgeInsetsDirectional.only(bottom: 12),
      child: _body,
    );
  }

  Widget get _body {
    // if (_rsp == null) {
    //   return const CupertinoActivityIndicator();
    // }
    // if (_rsp?.isSuccess != true) {
    //   return JREmptyView(
    //     onTap: _requestData,
    //   );
    // }
    return Stack(
      alignment: AlignmentDirectional.topCenter,
      children: [
        // PositionedDirectional(
        //     child: JR.img(_rsp?.data?.icon ?? '',
        //         width: ScreenUtils.ins.screenWidth,
        //         height: 422.w,
        //         fit: BoxFit.fill)),
        PositionedDirectional(
          top: 16,
          end: 16,
          child: GestureDetector(
            onTap: () {
              Get.back();
            },
            child: JR.img('close_code_icon.png', width: 24, height: 24),
          ),
        ),
        PositionedDirectional(
            top: 222.w,
            child: Container(
              decoration: BoxDecoration(
                  gradient: LinearGradient(
                      colors: [Colors.black.withOpacity(0), Colors.black],
                      begin: AlignmentDirectional.topStart,
                      end: AlignmentDirectional.bottomStart)),
              padding: const EdgeInsetsDirectional.only(start: 16, end: 16),
              height: 200.w,
              width: ScreenUtils.ins.screenWidth,
              alignment: AlignmentDirectional.bottomCenter,
              child: SingleChildScrollView(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text('_rsp?.data?.tittle',
                        style: JRTextStyles.styleFont18W700
                            .copyWith(fontSize: 20)),
                    SizedBox(
                      height: 4,
                      width: ScreenUtils.ins.screenWidth,
                    ),
                    Text('_rsp?.data?.desc ',
                        style: JRTextStyles.styleFont12W400),
                    const SizedBox(
                      height: 40,
                    )
                  ],
                ),
              ),
            )),
        PositionedDirectional(
            top: 398.w,
            start: 0,
            end: 0,
            bottom: 0,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(12),
              ),
              padding:
                  const EdgeInsetsDirectional.only(top: 24, start: 16, end: 16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('T.current!.cost',
                      style: JRTextStyles.styleFont14W600
                          .copyWith(color: JR.color.mainText)),
                  const SizedBox(height: 6),
                  // ...?_rsp?.data?.priceDescItems
                  //     .map((e) => _itemWidget(e))
                  //     .toList(),
                  const Spacer(),
                  JRButton(
                      title: T.current!.order,
                      onPressed: () {
                        Get.back(result: true);
                      })
                ],
              ),
            )),
      ],
    );
  }

  // Widget _itemWidget(PriceItem item) {
  //   return Container(
  //     decoration: BoxDecoration(
  //       color: JR.color.brandBg,
  //       borderRadius: BorderRadius.circular(12),
  //     ),
  //     height: 48,
  //     padding: const EdgeInsetsDirectional.symmetric(horizontal: 12),
  //     margin: const EdgeInsetsDirectional.only(bottom: 10),
  //     child: Row(
  //       children: [
  //         Padding(
  //           padding: const EdgeInsetsDirectional.only(end: 4),
  //           child: Text(
  //             item.prefix,
  //             style: JRTextStyles.styleFont12W400
  //                 .copyWith(color: JR.color.secondaryText),
  //             maxLines: 1,
  //           ),
  //         ),
  //         JRGradientText(
  //             item.price.toString(),
  //             LinearGradient(colors: JR.color.brandGradient),
  //             JRTextStyles.styleFont18W700.copyWith(fontSize: 20)),
  //         const SizedBox(width: 4),
  //         Flexible(
  //             child: Text(
  //           item.suffix,
  //           style: JRTextStyles.styleFont12W400
  //               .copyWith(color: JR.color.secondaryText),
  //           maxLines: 1,
  //         ))
  //       ],
  //     ),
  //   );
  // }
}
